
<template>
  <div class="table_ser">
    <el-table
      :data="itemslist.slice((pagenum - 1) * pagesize * pagenum * pagesize)"
      height="250"
      size="mini"
      border
      style="width: 100%; height: 20"
    >
      <el-table-column prop="panId" label="panId"></el-table-column>
      <el-table-column prop="result" label="9295"></el-table-column>
      <el-table-column prop="result" label="ABI">
        <template slot-scope="scope">
          <span v-html="showDate(scope.row.result)"></span>
        </template>
      </el-table-column>
       <el-table-column prop="result" label="AFI"></el-table-column>
    </el-table>

    <div class="tlop">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pagenum"
          :page-sizes="[10, 15, 20]"
          :page-size="pagesize"
          layout="sizes, prev, pager, next"
          :total="itemslist.length"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      search: "NG",
      total: 0,
      pagenum: 1,
      pagesize: 1,
      list: [],
      itemslist: [],
      listval: [],
      listpanId: [],
      listitem: [
        { title: "name" },
        { title: "name" },
        { title: "name" },
        { title: "name" },
        { title: "name" },
        { title: "name" },
      ],

      listtitle: {
        hader: [
          { name: "AFI" },
          { name: "MFI" },
          { name: "DOA" },
          { name: "ABI" },
          { name: "9295" },
          { name: "EAC" },
        ],
        panid: [
          { id: "a123456" },
          { id: "m8765432" },
          { id: "d0987" },
          // { id: "d767" },
          // { id: "d222098767" },
          // { id: "d098767" },
          // { id: "d0334767" },
          // { id: "d09467" },
          // { id: "d09asdf8767" },
          // { id: "d098767--" },
          // { id: "d098767098" },
          // { id: "d098767543" },
        ],
        aAFI: [{ val: "ok" }, { val: "" }, { val: "ng" }],
        bMFI: [{ val: "ok" }, { val: "ng" }, { val: "ng" }],
        cDOA: [{ val: "ng" }, { val: "ng" }, { val: "ng" }],
      },
    };
  },
  sockets: {
    dataquery(data) {
      let temp = JSON.parse(data);
      let list = temp.table;
      this.flangarr(list);
      // sessionStorage.setItem("datequery", JSON.stringify(temp));
    },
  },
  computed: {
    tables: function () {
      var val = this.search;
      if (val) {
        return this.tableData.filter((data) => {
          return Object.keys(data).some((key) => {
            return String(data[key].toLowerCase().indexOf(val) > -1);
          });
        });
      }
      return this.tableData;
    },
  },
  created() {
    // this.list = this.listtitle.hader;
    // this.listval = this.listtitle.aAFI;
    let temp = sessionStorage.getItem("datequery");
    let templist = JSON.parse(temp);
    // this.total = templist.tableNum;
    let listtitle = templist.table;
    // console.log(listtitle);

    this.flangarr(listtitle);
  },

  methods: {
    flangarr(data) {
      let a = [].concat(
        data.map((item) => {
          console.log(item.data);
          return item.data.map((i) => {
             console.log(i.result)
            return {
              panId: item.panId,
              deviceID: i.deviceID,
              result:  i.result,
              
            };
          });
        })
      );

      this.items = [].concat(...a);
      console.log(this.items);
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pagenum = val;
    },
    clicklist() {
      // this.list = this.tableData;
    },
    // 筛选变色
    showDate(val) {
      if (val.indexOf(this.search) !== -1 && this.search !== "") {
        return val.replace(
          this.search,
          '<font color="#FF0000">' + this.search + "</font>"
        );
      } else {
        return val;
      }
    },
  },
};
</script>

<style  scoped>
.tlop {
  width: 30%;
}

.table_ser {
  width: 100%;
  /* border: 1px solid #000; */
  overflow: auto;
}

.table_list {
  width: 100%;
  border: 1px solid red;
  display: flex;
}
</style>